* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(100deg, #abbaab, #fff);
}
.contain {
  display: flex;
  padding: 0.833rem 0.833rem 0;
}
.contain .left {
  flex: 1;
  color: #3b4249;
  font-size: 0.833rem;
}
.contain .left .inp {
  white-space: nowrap;
}
.contain .left .inp .item {
  width: 10.417rem;
  height: 2.083rem;
  margin-left: 0.417rem;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 0.208rem;
  vertical-align: middle;
  padding-left: 0.417rem;
  font-size: 0.75rem;
}
.contain .left .inp input:last-child {
  width: 4.167rem;
  height: 2rem;
  background-color: #237b9e;
  vertical-align: middle;
  border-radius: 0.208rem;
  font-size: 0.833rem;
  color: #fff;
  border: none;
  cursor: pointer;
}
.contain .left table {
  margin-top: 1.042rem;
  border: 1px solid #e3f11b;
  border-radius: 0.208rem;
  border-spacing: 0rem;
  text-align: center;
  background: linear-gradient(100deg, #b6eff7, #e4a2f5);
}
.contain .left table tr td,
.contain .left table tr th {
  width: 14.167rem;
  height: 2rem;
  border-right: 1px solid #e3f11b;
  border-bottom: 1px solid #e3f11b;
}
.contain .left table tr td:last-child,
.contain .left table tr th:last-child {
  border-right: none;
}
.contain .left table tr:last-child td {
  border-bottom: none;
}
.contain .right {
  width: 32.083rem;
  margin-left: 2.083rem;
  display: none;
}
.contain .right .top {
  margin-bottom: 1.25rem;
}
.contain .right h3 {
  margin-bottom: 0.833rem;
}
.contain .right .table {
  width: 29.167rem;
  height: 16.667rem;
}
